/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, TableHead, LineColumn, InputLine, SuffixInput,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, SelectHookfork, useItemInputControl,} from "../../common/base";
import {floatInterception} from "../../../common/tool";
import {useMeasureInpFilter} from "../../common/hooks";


export const itemA瞬间速=['瞬速1','瞬速2','瞬速3','速度校核r'];
//Instantaneous speed
export const InstantanSpeed=
    React.forwardRef(({ children, show ,alone=true,refWidth,label}:InternalItemProps,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null, itemA瞬间速, );
      const {inp, setInp} = useItemInputControl({ ref });
      const aveSpeed=(Number(inp?.瞬速1) + Number(inp?.瞬速2) + Number(inp?.瞬速3))/3;
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}</Text>
            <Text variant="h5">运行速度V， 合计测量三次：</Text>
            <LineColumn>
              <InputLine label='次数1：'>
                <SuffixInput value={inp?.瞬速1 ?? ''} type='number'
                             onSave={txt => setInp({...inp, 瞬速1: txt || undefined})}>m/s</SuffixInput>
              </InputLine>
              <InputLine label='次数2：'>
                <SuffixInput value={inp?.瞬速2 ?? ''} type='number'
                             onSave={txt => setInp({...inp, 瞬速2: txt || undefined})}>m/s</SuffixInput>
              </InputLine>
              <InputLine label='次数3：'>
                <SuffixInput value={inp?.瞬速3 ?? ''} type='number'
                             onSave={txt => setInp({...inp, 瞬速3: txt || undefined})}>m/s</SuffixInput>
              </InputLine>
            </LineColumn>
            <div css={{textAlign: 'center'}}>
              平均速度V＝（V1＋V2＋V3）/3; &nbsp; 计算结果={floatInterception(aveSpeed, 1)} m/s;
            </div>
            <Text variant="h6" css={{textAlign: 'center'}}>判断标准:滑车在与制动（缓冲）装置接触前瞬间速度不大于3.5m/s</Text>
            <InputLine label={'校核结论'}>
              <SelectHookfork value={inp?.速度校核r ?? ''} onChange={e =>
                  setInp({...inp, 速度校核r: e.currentTarget.value || undefined})}/>
            </InputLine>
          </InspectRecordLayout>
    );
});

interface InstantanSpeedVwProps{
    orc: any;
    rep: any;
    children?: React.ReactNode;
    label: string;
}
export const InstantanSpeedVw= ({ orc, rep, children,label}: InstantanSpeedVwProps
) => {
  const aveSpeed=(Number(orc?.瞬速1) + Number(orc?.瞬速2) + Number(orc?.瞬速3))/3;
  return <>
    <div css={{"@media print": {paddingBottom: '4.5rem', pageBreakInside: 'avoid'}}}>
      <Text id={'InstantanSpeed'} variant="h4" css={{marginTop: '1rem',
      }}>{label}</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>单位：m/s</Text>
      </div>
    </div>
    <Table fixed={ ["11%", "23%", "35%", "%", "13%"] }
           css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4.5rem'}}} tight miniw={800}>
       <TableHead>
        <TableRow>
            <CCell>测量次数</CCell><CCell>运行速度V</CCell><CCell colSpan={2}>计算结果</CCell><CCell>结论</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'InstantanSpeed'}>
            <TableRow>
                <CCell>1</CCell><CCell>{orc.瞬速1 ?? '／'}</CCell>
              <CCell rowSpan={3}>平均速度V＝（V1＋V2＋V3）/3=</CCell>
                <CCell rowSpan={3}>{floatInterception(aveSpeed, 1)}</CCell>
              <CCell rowSpan={3}>{orc?.速度校核r ?? '／'}</CCell>
            </TableRow>
            <TableRow><CCell>2</CCell><CCell>{orc.瞬速2 ?? '／'}</CCell>
            </TableRow>
            <TableRow><CCell>3</CCell><CCell>{orc.瞬速3 ?? '／'}</CCell>
            </TableRow>
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
